<template>
  <el-card class="card" ref="card">
    <div ref="div">
      <el-row class="mg-8" :gutter="24">
        <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-loading="loading">
      <el-table></el-table>
    </div>
    <MenuModal ref="modal"></MenuModal>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "Menu"
}
</script>

<script setup lang="ts">
import {onMounted, ref} from "vue"
import {useCardHeight} from '@/hooks/useCardHeight'
import {getMenuList} from '@/api/system.menu'
import MenuModal from '@/pages/system/menu/component/MenuModal.vue'
import {MenuModalType} from '@/pages/system/menu/component/menu.component'

const loading = ref<boolean>(false)

const modal = ref<MenuModalType>()

const { card, height, div } = useCardHeight()

const getList = () => {
  getMenuList({type: "-1"}).then(res => {
    console.log(res)
  })
}

const handlePaginationChange = () => {
  getList()
}

const handleAdd = () => {
  modal.value?.init()
}

onMounted( () => {
  getList()
} )
</script>

<style scoped lang="scss">

</style>
